<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>

<%@include file="/common/head.jsp" %>
<style>
    .form-control.inline {
        display: inline-block;
        width: 80%;
    }

    .control-label.text-left {
        text-align: left;
    }

    #temp,
    .err {
        display: none;
    }

    .err {
        margin-top: 13px;
    }
</style>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <form action="${ctx }/admin/agent/save?id=${n.id }" id="detail-form" class="form-horizontal" method="post">
        <h4>基本信息</h4>
        <div class="form-group">
            <!-- 机构名称 -->
            <label class="col-sm-2 control-label"><span class="text-danger">* </span>机构名称</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" name="orgName"  value="${n.orgName }" required>
            </div>
        </div>
        <div class="form-group">
            <!-- 负责人 -->
            <label class="col-sm-2 control-label"><span class="text-danger">* </span>负责人</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" name="manager"  value="${n.manager }" required>
            </div>
        </div>
        <div class="form-group">
            <!-- 手机 -->
            <label class="col-sm-2 control-label"><span class="text-danger">* </span>联系方式</label>
            <div class="col-sm-4">
                <input type="text" class="form-control num_input" name="mobile" maxlength="11" value="${n.mobile }" required>
            </div>
        </div>
        <h4>账号分配</h4>
        <div id="services">
            <c:if test="${n == null}">
                <div class="form-group">
                    <label class="col-sm-2 control-label">账号类型</label>
                    <div class="col-sm-3">
                        <select type="text" class="form-control" name="servicePackageId">
                            <c:forEach items="${existedServicePackageList}" var="es">
                                <option value="${es.id}">${es.name}(${es.expireDays}天)</option>
                            </c:forEach>
                        </select>
                    </div>
                    <label class="col-sm-2 control-label">个数限制</label>
                    <div class="col-sm-2">
                        <input type="text" class="form-control inline servicePackageCount" name="servicePackageCount" value="">
                        个
                    </div>
                    <label class="col-sm-1 control-label">
                        <a href="javascript: void(0);" onclick="delServ(this)">删除</a>
                    </label>
                </div>
            </c:if>
            <c:if test="${n != null and agentServicePackageList.size() == 0}">
                <div class="form-group">
                    <label class="col-sm-2 control-label">账号类型</label>
                    <div class="col-sm-2">
                        <select type="text" class="form-control" name="servicePackageId">
                            <c:forEach items="${existedServicePackageList}" var="es">
                                <option name="servicePackageId" value="${es.id}">${es.name}</option>
                            </c:forEach>
                        </select>
                    </div>
                    <label class="col-sm-2 control-label">个数限制</label>
                    <div class="col-sm-2">
                        <input type="text" class="form-control inline servicePackageCount" name="servicePackageCount" value="">
                        个
                    </div>
                    <label class="col-sm-1 control-label">
                        <a href="javascript: void(0);" onclick="delServ(this)">删除</a>
                    </label>
                </div>

            </c:if>
            <c:if test="${n != null and agentServicePackageList.size() > 0}">
                <c:forEach items="${agentServicePackageList}" var="as">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">账号类型</label>
                        <div class="col-sm-3">
                            <select type="text" class="form-control" name="servicePackageId" disabled="true">
                                <c:forEach items="${existedServicePackageList}" var="es">
                                    <option name="servicePackageId" value="${es.id}"
                                            <c:if test="${as.servicePackage.id == es.id}">selected</c:if>>${es.name}(${es.expireDays}天)</option>
                                </c:forEach>
                            </select>
                            <input type="hidden" name="servicePackageId" value="${as.servicePackage.id}"/>
                        </div>
                        <label class="col-sm-2 control-label">个数限制</label>
                        <div class="col-sm-2">
                            <input type="text" class="form-control inline servicePackageCount" name="servicePackageCount"
                                   value="${as.count}" readonly>
                            个
                        </div>
                        <label class="col-sm-1 control-label">
                            <a href="javascript: void(0);" onclick="delServ(this)">删除</a>
                        </label>
                    </div>
                </c:forEach>
            </c:if>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">
                <button type="button" class="btn btn-sm btn-primary" onclick="addServ()">新增</button>
            </label>
            <div class="col-sm-4">
                <label class="err text-danger">格式错误，个数必须是大于0的整数</label>
            </div>
        </div>
    </form>
</div>
<%--新增账号类型模板--%>
<div id="temp">
    <div class="form-group">
        <label class="col-sm-2 control-label">账号类型</label>
        <div class="col-sm-3">
            <select type="text" class="form-control" name="servicePackageId">
                <c:forEach items="${existedServicePackageList}" var="es">
                    <option name="servicePackageId" value="${es.id}"
                        <c:if test="${as.servicePackage.id == es.id}">selected</c:if>>${es.name}(${es.expireDays}天)
                    </option>
                </c:forEach>
            </select>
        </div>
        <label class="col-sm-2 control-label">个数限制</label>
        <div class="col-sm-2">
            <input type="text" class="form-control inline servicePackageCount" name="servicePackageCount" value="">
            个
        </div>
        <label class="col-sm-1 control-label">
            <a href="javascript: void(0);" onclick="delServ(this)">删除</a>
        </label>
    </div>
</div>
<%@include file="/common/foot.jsp" %>
<script>
    function validateInput(){
        var flag = true;
        var count = true;

        $("#services .servicePackageCount").each(function () {
            if ($(this).val() <= 0) {
                flag = false;
                count = false;
            }
        });

        if($("input[name='orgName']").val().trim() === ''){
            flag = false;
            error('请填写机构名称');
        } else if($("input[name='manager']").val().trim() === ''){
            flag = false;
            error('请填写负责人');
        } else if($("input[name='mobile']").val().trim() === ''){
            flag = false;
            error('请填写联系方式');
        }

        if (!count) {
            $(".err").show();
        } else {
            $(".err").hide();
        }

        return flag;
    }
    function addServ() {
        $("#services").append($("#temp").html());
    }

    function delServ(ele) {
        $(ele).closest(".form-group").remove();
    }

    // 限制账号类型数量输入为整数并判断
    $(document).on("input", ".servicePackageCount", function () {
        $(this).val($(this).val().replace(/\D/g, ""));
        if ($(this).val() > 0) {
            $(".err").hide();
        } else {
            $(".err").show();
        }
    });
</script>
</body>
</html>
